<template>
  <div class="dig">
    <template v-if="step==0">
      <CusForm @selectCus="selectCus"></CusForm>
    </template>
    <template v-if="step==1">
      <div class="abs-l">
        <div class="headArea">
          <el-date-picker type="daterange" v-model="datepicker" size="mini"
            start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            unlink-panels :picker-options="pickerOptions">
          </el-date-picker>
          <el-button type="" size="mini" @click="thisGetHistory">加载</el-button>
        </div>
        <div class="bodyArea">
          <div class="loadingPlacehold" v-loading="L_loading" v-if="L_loading"></div>
          <WxMsg :msgList="Lo_MsgList" @scroll="scroll" v-if="!L_loading">
            <template slot="emptyImg">
              <el-empty :image="noData.src" :image-size="280"><div slot="description"><b class="">暂无记录</b></div></el-empty>
            </template>
            <div slot="suffix" slot-scope="scope">
              <span class="text-blue">来自：{{ scope.data.appName }}</span>
              <el-button type="warning" size="mini" @click="addMsg_R(scope.data)" :disabled="scope.data.isInRight">
                向右添加
                <i class="fa fa-fw fa-long-arrow-right"></i>
              </el-button>
            </div>
          </WxMsg>
        </div>
        <div class="footArea">
          <el-button type="warning" size="mini" v-if="L_MsgList.length > 0"
            @click="selectAll2Right">全右移</el-button>
        </div>
      </div>
      <div class="abs-r">
        <!-- <Draft ref="draft" :esId="eSCompanyId" :cusId="qYWXUsersId"/> -->
        <div class="headArea">
          <el-input v-model="rfTitle" placeholder="请输入标题" size="mini">
            <template slot="prepend">
              <span class="text-red">*</span>标题
            </template>
          </el-input>
        </div>
        <div class="bodyArea">
          <div class="loadingPlacehold" v-loading="R_loading" v-if="R_loading"></div>
          <WxMsg :msgList="R_MsgList" @scroll="scroll">
            <template slot="emptyImg">
              <el-empty :image="noData.src" :image-size="280"><div slot="description"><b class="">暂无记录</b></div></el-empty>
            </template>
            <div slot="suffix" slot-scope="scope">
              <el-button type="warning" size="mini" @click="removeMsg_R(scope.data)">审核<i class="fa fa-fw fa-long-arrow-left"></i></el-button>
              <span class="text-blue">来自：{{ scope.data.appName }}</span>
            </div>
          </WxMsg>
        </div>
        <div class="footArea">
          
        </div>
      </div>
    </template>
  </div>
</template>

<script src="./create.js"></script>

<style lang="less" scoped>
.loadingPlacehold{
  height:360px;
}
.dig{
  height:60vh;
}
@w1:51%;@w2:51%;
.abs-l{
  position: absolute;
  top:0;bottom:0;left:0;right:@w2;
  border:1px solid #ddd;
  border-radius: 16px;
}
.abs-r{
  position: absolute;
  top:0;bottom:0;left:@w1;right:0;
  border:1px solid #ddd;
  border-radius: 16px;
}

.h100{
  height:100%;
}

@hh:36px;@fh:36px;
.headArea{
  position: absolute;
  left:0;right:0;
  top:0;
  height:@hh;
  line-height:@hh;
  padding:2px 10px;
}
.bodyArea{
  position: absolute;
  top:@hh+10px;bottom:@fh+10px;
  left:10px;right:10px;
}
.footArea{
  position: absolute;
  left:0;right:0;
  bottom:0;
  height:@fh;
  padding:0 16px;
}
.text-blue{
  color:#409eff;
}
</style>